<template>
  <div class="main">
    <van-pull-refresh style="" v-model="isLoading" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-nav-bar title="审核中心" left-arrow @click-left="onClickLeft" />
        <ul>

          <van-swipe-cell v-for="item in moviedata">
            <li>
              <img v-lazy="item.imgs" alt="">
              <div class="cont">
                <p style="font-size:18px;">{{ item.name }}</p>

                <p>审核状态：</p>
                <span v-if="item.status == 0"
                  style=" color:gray;border: 1px  solid grey; text-align: center; border-radius: 5px;">审核中</span>
                <span v-if="item.status == 1"
                  style="color:green;border: 1px  solid green; text-align: center; border-radius: 5px;">审核通过</span>
                <span v-if="item.status == 2"
                  style="color:red;border: 1px  solid red; text-align: center; border-radius: 5px;">审核不通过</span>
                <span v-if="item.status == 2">理由:{{ item.liyou }}</span>
              </div>
              <div class="btn">
                <van-button @click="xiugai(item.id)" round type="info" id="button">修改信息</van-button>
              </div>
            </li>
            <template #right>
              <van-button class="delete" @click="deletes(item.id)" square type="danger" text="删除" />
            </template>
          </van-swipe-cell>

        </ul>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { Toast, Card } from 'vant';
import httpApi from '@/http';
import { mapMutations } from 'vuex'
import _ from 'lodash'


// Vue.use(Card);
export default {
  data() {
    return {
      count: 0,
      isLoading: false,
      moviedata: [],
      loading: false,
      finished: false,
      lock: false,
    };
  },
  methods: {
    ...mapMutations(['saveUser_shenhe']),
    fangdou: _.debounce(function () {
      console.log('测试防抖');
    }, 300),
    //导航按钮点击返回
    onClickLeft() {
      this.$router.back();
    },
    onLoad() {
      // onLoad执行时, vant会自动将loading改为true
      var user = this.$store.state.user
      if(user){
        user=user.username
      if (this.lock) {
        this.lock = false
        this.loading = false
        return
      }
      console.log("到底了...")
      // 发送请求, 加载下一页数据   下一页数据的page=?  与movieData.length
      let nextPage = Math.floor(this.moviedata.length / 10) + 1; // 下一页页码
      let pagesize = 10; // 每页多少条
      let params = { user, page: nextPage, pagesize, user_status: 0 }
      httpApi.userApi.shenhe(params).then((res) => {

        // console.log(res)


        if (res.data.total == this.moviedata.length) {
          console.log(res.data.total, this.moviedata.length);
          this.finished = true;
          return
        }


        this.moviedata.push(...res.data.data);
        this.loading = false;
        // this.refreshing = false;
        // 判断当前列表是否已经到底
        // 先判断是否为空
        console.log(res.data.total, this.moviedata.length);
        if (res.data.total == this.moviedata.length) {
          console.log(res.data.total, this.moviedata.length);
          this.finished = true;
        }
      });
    }else{
      this.isLoading = false;
      this.finished = true;
      this.loading = false
    }
    },
    onRefresh() {
      this.shenhe()
      Toast('刷新成功');
      this.isLoading = false;
      this.finished = false;
      this.loading = false
      this.lock = true
    },
    // 获取审核所有信息
    shenhe() {
      var user = this.$store.state.user
      if (user) {
        user = user.username
        let params = { user, page: 1, pagesize: 10, user_status: 0 }
        httpApi.userApi.shenhe(params).then(res => {
          console.log(res);
          // 替换掉当前列表
          // this.moviedata=[]
          // console.log('清空了数组');
          this.moviedata.splice(
            0,
            this.moviedata.length,
            ...res.data.data
          );
          console.log('下拉刷新时', res.data.total, this.moviedata.length);
        })
      }
    },
    deletes(id) {
      console.log(132);
      let params = { id, user_status: 1 }
      httpApi.userApi.shenhe_delete(params).then(res => {
        console.log(res);
      })
      this.onRefresh()
    },
    xiugai(id) {
      let params = { id }
      // // 获取该审核所有信息
      httpApi.userApi.shenheByid(params).then(res => {
        console.log(res);
        let cont = res.data.data
        // 存用户审核信息到state里
        this.saveUser_shenhe(cont)
        this.$router.push('/upload_xiugai')
      })
    }
  },
  mounted() {
    // this.shenhe()
  }
};
</script>

<style lang="scss" scoped>
ul {
  padding: 0 0 0 2vw;
  background-color: #ffffff;


  li {
    background-color: #f7f7f7;
    box-shadow: 0 0 10px 2px #dcdada;
    overflow: hidden;
    display: flex;
    height: 18vh;
    margin-top: 20px;
    position: relative;

    // justify-content: space-around;
    .btn {
      flex: 1;

      #button {
        width: 28%;
      }
    }

    img {
      border-radius: 5%;
      height: 100%;
      width: 130px;
      display: block;
      overflow: cover;
      object-fit: cover;

    }

    .cont {
      margin-left: 1vw;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      p {
        margin-bottom: 5px;
      }
    }

    .van-button--round {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 0;
    }
  }

  .delete {
    height: 100%;
    border-radius: 10px;
  }
}</style>
